<template>
  <div class="bg-white">
    <el-page-header :content="title" @back="logOutTips"></el-page-header>
    <chart-form-detail class="pa-10" :detail="false" :current="current" @back="back" />
  </div>
</template>

<script>
import moment from 'moment'
import { mapGetters } from 'vuex'
import { DEFAULT_COMMON_CANVAS_STYLE_STRING } from '@/views/panel/panel'
import { requestTargetDetail } from '@/api/chart/chart'
import msgCfm from '@/components/msgCfm/index'
import ChartFormDetail from './components/chart-form-detail'

export default {
  name: 'ChartEdit',
  components: { ChartFormDetail },
  mixins: [msgCfm],
  data() {
    return {
      title: '',
      current: {},
    }
  },
  computed: {
    ...mapGetters(['name']),
  },
  created() {
    this.init()
  },
  methods: {
    async init() {
      if (this.$route.params.id) {
        this.title = this.$t('commons.edit')
        const res = await requestTargetDetail({ id: this.$route.params.id })
        if (res.success) {
          this.title = `${this.$t('commons.edit')}${res.data.name}`
          this.current = {
            ...res.data,
            indexLabel: res.data.indexLabel ? res.data.indexLabel.split(',') : [],
            director: Number(res.data.director),
            position: Number(res.data.position),
            panelStyle: JSON.stringify(DEFAULT_COMMON_CANVAS_STYLE_STRING),
            reviser: this.name,
            createdAt: moment(new Date()).format('YYYY-MM-DD HH:mm:ss'),
          }
        } else {
          this.$message.error(res.message)
        }
      } else {
        this.title = this.$t('chart.add_chart_title')
        const chart = localStorage.getItem('chart')
        if (chart) {
          this.current = JSON.parse(chart)
        } else {
          this.current = {
            panelStyle: JSON.stringify(DEFAULT_COMMON_CANVAS_STYLE_STRING),
            reviser: this.name,
            createdAt: moment(new Date()).format('YYYY-MM-DD HH:mm:ss'),
          }
        }
      }
    },
    back() {
      this.$store.dispatch('tagsView/delView', this.$route).then(() => {
        this.$router.back()
      })
    },
    logOutTips() {
      const options = {
        title: 'chart.tips',
        confirmButtonText: this.$t('commons.confirm'),
        content: 'system_parameter_setting.sure_to_exit',
        type: 'primary',
        cb: () => {
          this.back()
        },
      }
      this.handlerConfirm(options)
    },
  },
}
</script>
<style scoped lang="scss">
::v-deep .el-page-header {
  background-color: #fff;
  padding: 20px;
  border-bottom: 1px solid #f0f0f0;
}
::v-deep .el-page-header__content {
  font-size: 16px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  color: #262626;
}
.bg-white {
  min-height: 100%;
}
</style>
